

import React, { useState, useCallback } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  ScrollView,
  TouchableWithoutFeedback,
} from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface FilterModalProps {
  visible: boolean;
  onClose: () => void;
  onApply: (filters: any, sort: string) => void;
}

const FilterModal: React.FC<FilterModalProps> = ({ visible, onClose, onApply }) => {
  const [selectedTypes, setSelectedTypes] = useState<Set<string>>(new Set());
  const [selectedPriorities, setSelectedPriorities] = useState<Set<string>>(new Set());
  const [selectedSort, setSelectedSort] = useState<string>('');

  const typeOptions = [
    { value: 'leave', label: '请假申请' },
    { value: 'purchase', label: '采购申请' },
    { value: 'budget', label: '预算申请' },
    { value: 'travel', label: '出差申请' },
  ];

  const priorityOptions = [
    { value: 'high', label: '高' },
    { value: 'medium', label: '中' },
    { value: 'low', label: '低' },
  ];

  const sortOptions = [
    { value: 'time', label: '按时间排序' },
    { value: 'priority', label: '按优先级排序' },
    { value: 'type', label: '按类型排序' },
  ];

  const handleTypeToggle = useCallback((value: string) => {
    setSelectedTypes(prev => {
      const newSet = new Set(prev);
      if (newSet.has(value)) {
        newSet.delete(value);
      } else {
        newSet.add(value);
      }
      return newSet;
    });
  }, []);

  const handlePriorityToggle = useCallback((value: string) => {
    setSelectedPriorities(prev => {
      const newSet = new Set(prev);
      if (newSet.has(value)) {
        newSet.delete(value);
      } else {
        newSet.add(value);
      }
      return newSet;
    });
  }, []);

  const handleSortSelect = useCallback((value: string) => {
    setSelectedSort(prev => prev === value ? '' : value);
  }, []);

  const handleReset = useCallback(() => {
    setSelectedTypes(new Set());
    setSelectedPriorities(new Set());
    setSelectedSort('');
  }, []);

  const handleApply = useCallback(() => {
    const filters = {
      types: Array.from(selectedTypes),
      priorities: Array.from(selectedPriorities),
    };
    onApply(filters, selectedSort);
  }, [selectedTypes, selectedPriorities, selectedSort, onApply]);

  const handleBackdropPress = useCallback(() => {
    onClose();
  }, [onClose]);

  const renderCheckbox = useCallback((isSelected: boolean) => (
    <View style={[styles.checkbox, isSelected && styles.checkboxSelected]}>
      {isSelected && (
        <FontAwesome6 name="check" size={12} color="#FFFFFF" />
      )}
    </View>
  ), []);

  const renderRadio = useCallback((isSelected: boolean) => (
    <View style={[styles.radio, isSelected && styles.radioSelected]}>
      {isSelected && <View style={styles.radioInner} />}
    </View>
  ), []);

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
    >
      <TouchableWithoutFeedback onPress={handleBackdropPress}>
        <View style={styles.backdrop}>
          <TouchableWithoutFeedback>
            <View style={styles.modalContainer}>
              {/* 头部 */}
              <View style={styles.header}>
                <Text style={styles.title}>筛选条件</Text>
                <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                  <FontAwesome6 name="xmark" size={20} color="#6B7280" />
                </TouchableOpacity>
              </View>

              <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
                {/* 审批类型 */}
                <View style={styles.section}>
                  <Text style={styles.sectionTitle}>审批类型</Text>
                  <View style={styles.optionsGrid}>
                    {typeOptions.map((option) => (
                      <TouchableOpacity
                        key={option.value}
                        style={styles.optionItem}
                        onPress={() => handleTypeToggle(option.value)}
                        activeOpacity={0.7}
                      >
                        {renderCheckbox(selectedTypes.has(option.value))}
                        <Text style={styles.optionText}>{option.label}</Text>
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>

                {/* 优先级 */}
                <View style={styles.section}>
                  <Text style={styles.sectionTitle}>优先级</Text>
                  <View style={styles.priorityGrid}>
                    {priorityOptions.map((option) => (
                      <TouchableOpacity
                        key={option.value}
                        style={styles.optionItem}
                        onPress={() => handlePriorityToggle(option.value)}
                        activeOpacity={0.7}
                      >
                        {renderCheckbox(selectedPriorities.has(option.value))}
                        <Text style={styles.optionText}>{option.label}</Text>
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>

                {/* 排序方式 */}
                <View style={styles.section}>
                  <Text style={styles.sectionTitle}>排序方式</Text>
                  <View style={styles.sortOptions}>
                    {sortOptions.map((option) => (
                      <TouchableOpacity
                        key={option.value}
                        style={styles.sortOption}
                        onPress={() => handleSortSelect(option.value)}
                        activeOpacity={0.7}
                      >
                        <Text style={styles.sortOptionText}>{option.label}</Text>
                        {renderRadio(selectedSort === option.value)}
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>
              </ScrollView>

              {/* 操作按钮 */}
              <View style={styles.actions}>
                <TouchableOpacity
                  style={[styles.actionButton, styles.resetButton]}
                  onPress={handleReset}
                  activeOpacity={0.7}
                >
                  <Text style={styles.resetButtonText}>重置</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.actionButton, styles.applyButton]}
                  onPress={handleApply}
                  activeOpacity={0.7}
                >
                  <LinearGradient
                    colors={['#969FFF', '#5147FF']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.applyButtonGradient}
                  >
                    <Text style={styles.applyButtonText}>应用</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

export default FilterModal;

